<template>
  <div>
    <Tabs :animated="false">
      <TabPane label="每日汇总">
        <ListHeader>
          <ListSearch>
            <Form inline :label-width="80">
              <Form-item label="创建时间">
                <DatePicker v-model="billDate_day" format="yyyy-MM" type="month"
                            style="width: 200px"></DatePicker>
              </Form-item>
              <Form-item label="支付渠道">
                <Select v-model="search_day.channelCode" style="width: 200px">
                  <Option value="" key="">全部</Option>
                  <Option v-for="item in this.channelCode_day" :value="item.code" :key="item.name">
                    {{ item.name }}
                  </Option>
                </Select>
              </Form-item>
              <Form-item style="margin-left: -80px;">
                <Button type="primary" shape="circle" @click="getBillDay">搜索</Button>
              </Form-item>
            </Form>
          </ListSearch>
        </ListHeader>
        <Table :columns="columns_day" :data="data_day"></Table>
        <div style="height: 130px;"></div>
      </TabPane>
      <TabPane label="每月汇总">
        <ListHeader>
          <ListSearch>
            <Form inline :label-width="80">
              <Form-item label="创建时间">
                <DatePicker v-model="billDate_month" format="yyyy" type="year"
                            style="width: 200px"></DatePicker>
              </Form-item>
              <Form-item label="支付渠道">
                <Select v-model="search_month.channelCode" style="width: 200px"
                        @on-change="get(1)">
                  <Option value="" key="">全部</Option>
                  <Option v-for="item in this.channelCode_month" :value="item.code" :key="item.name">
                    {{ item.name }}
                  </Option>
                </Select>
              </Form-item>
              <Form-item style="margin-left: -80px;">
                <Button type="primary" shape="circle" @click="getBillMonth">搜索</Button>
              </Form-item>
            </Form>
          </ListSearch>
        </ListHeader>
        <Table :columns="columns_month" :data="data_month"></Table>
        <div style="height: 130px;"></div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {ListHeader, ListOperations, ListSearch} from '@/components/List'
  import time from '@/utils/helpers/timeLite'
  import Model from '@/models/apps'
  import storage from '@/utils/helpers/storageLite'
  import consts from '@/utils/consts'
  export default {
    name: 'billQuery',
    components: {
      ListHeader,
      ListSearch
    },
    data () {
      return {
        downloadBill_day: '',
        downloadBill_month: '',
        billDate_day: time.format(new Date(), 'YYYY-MM'),
        search_day: {
          channelCode: '',
          billType: 'BILL_TYPE_DAY'
        },
        billDate_month: time.format(new Date(), 'YYYY'),
        search_month: {
          channelCode: '',
          billType: 'BILL_TYPE_MONTH'
        },
        columns_day: [
          {
            title: '日期',
            key: 'billDate'
          },
          {
            title: '收入',
            key: 'totalInAmount',
            align: 'right',
            render (h, params) {
              return h('span', null, '¥' + params.row.totalInAmount)
            }
          },
          {
            title: ' ',
            key: 'totalInCount',
            align: 'left',
            render (h, params) {
              return h('span', null, params.row.totalInAmount + '笔')
            }
          },
          {
            title: '支出',
            key: 'totalOutAmount',
            align: 'right',
            render (h, params) {
              return h('span', null, '¥' + params.row.totalOutAmount)
            }
          },
          {
            title: ' ',
            key: 'totalOutCount',
            align: 'left',
            render (h, params) {
              return h('span', null, params.row.totalOutCount + '笔')
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 90,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: () => {
                      this.downloadFile(params.row.id, this.search_day.billType)
                    }
                  }
                }, '下载帐单')
              ])
            }
          }
        ],
        columns_month: [
          {
            title: '日期',
            key: 'billDate'
          },
          {
            title: '收入',
            key: 'totalInAmount',
            align: 'right',
            render (h, params) {
              return h('span', null, '¥' + params.row.totalInAmount)
            }
          },
          {
            title: ' ',
            key: 'totalInCount',
            align: 'left',
            render (h, params) {
              return h('span', null, params.row.totalInAmount + '笔')
            }
          },
          {
            title: '支出',
            key: 'totalOutAmount',
            align: 'right',
            render (h, params) {
              return h('span', null, '¥' + params.row.totalOutAmount)
            }
          },
          {
            title: ' ',
            key: 'totalOutCount',
            align: 'left',
            render (h, params) {
              return h('span', null, params.row.totalOutCount + '笔')
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 90,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: () => {
                      this.downloadFile(params.row.id, this.search_month.billType)
                    }
                  }
                }, '下载帐单')
              ])
            }
          }
        ],
        data_day: [],
        data_month: [],
        channelCode_day: [],
        channelCode_month: []
      }
    },
    computed: mapState({
      'allApps': state => state.allApps,
      getCurrentApp (state) {
        return state.allApps.currentApp
      }
    }),
    watch: {
      getCurrentApp (val) {
        this.init()
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.getBillDay()
        this.getBillMonth()
        this.getChannels()
      },
      getBillDay () {
        new Model('bills')
          .GET({
            params: {
              appId: this.$route.params.id,
              billDate: time.format(this.billDate_day, 'YYYY-MM'),
              ...this.search_day
            }
          })
          .then((res) => {
            this.data_day = res.data.data
          })
      },
      getBillMonth () {
        new Model('bills')
          .GET({
            params: {
              appId: this.allApps.currentApp,
              billDate: time.format(this.billDate_month, 'YYYY'),
              ...this.search_month
            }
          })
          .then((res) => {
            this.data_month = res.data.data
          })
      },
      getChannels () {
        new Model('listAllChannelsByAppId')
          .GET({
            params: {
              appId: this.$route.params.id
            }
          })
          .then((res) => {
            this.channelCode_day = res.data.data
            this.channelCode_month = res.data.data
          })
      },
      downloadFile (id, billType) {
        /*     new Model('downloadBill')
         .GET({
         params: {
         id: id,
         billType: billType
         }
         })
         .then((res) => {
         if (res.data.errorCode === '3001') {
         this.$Message.info('账单还未生成或没交易')
         }
         }) */
        window.open(consts.API_URL + '/downloadBill?id=' + id + '&billType=' + billType)
      }
    }
  }
</script>

<style>
  paddingLeft {
    padding-left: -10px;
  }

</style>

